<template>
  <div class="layui-row">
       <div class="layui-col-md9 layui-row">
           <lump class="layui-col-md12">
                <base-card title="用户查询">
                    
                </base-card>
                <base-card title="用户信息">
                    <table id="user-table" lay-filter="user-table-filter"></table>
                </base-card>
            </lump>
       </div>
       <div class="layui-col-md3 layui-row">
           <lump class="layui-col-md12">
                <base-card title="KgoUI">
                    <form class="layui-form" action="">
                        <layui-input-block name="userName" title="登录名"></layui-input-block>
                        <layui-input-block name="password" title="密码" type="password"></layui-input-block>
                        <layui-input-block name="confirmPassword" title="确认密码" type="password"></layui-input-block>
                        <layui-input-block name="userNick" title="昵称"></layui-input-block>
                        <layui-select-block name="role" title="角色"></layui-select-block>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </base-card>
            </lump>
       </div>

  </div>
</template>

<script>
import Lump from '@/components/layout/Lump'
export default {
    components: {
      Lump
     
    },
    data () {
        return {
          isAddUser:false
        }
    },
   mounted(){
        layui.form.render();
        var that = this;
        this.initUserTable();
        /**
         * 新增用户的监听
         */
        layui.form.on('submit(formDemo)', function(data){
               // layer.msg(JSON.stringify(data.field));
               if(data.field.userName==null||data.field.userName==""){
                    layer.msg("登录名不能为空！请检查");
                    return false;
                }
                if(data.field.password==null||data.field.password==""){
                    layer.msg("密码不能为空！请检查");
                    return false;
                }
                if(data.field.password!=data.field.confirmPassword){
                    layer.msg("两次密码输入不一致！");
                    return false;
                }
                if(data.field.userNick==null||data.field.userNick==""){
                    layer.msg("昵称不能为空！请检查");
                    return false;
                }
                var url = that.$store.state.RootURL + "/user";
                $.post(url,data.field,function(result){
                    layer.msg(result.msg);
                },"json");
            return false;
        });
   },
   methods:{
       initUserTable:function(){
            var url = this.$store.state.RootURL + "/user";
             layui.table.render({
                elem: '#user-table'
                ,height: 500
                ,url: url //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                {field: 'userName', title: '用户名', width:180}
                ,{field: 'userNick', title: '昵称', width:180}
                ,{field: 'createTime', title: '创建时间', width:200} 
                ,{field: 'updateTime', title: '更新时间', width: 200}
                ,{field: 'remark', title: '备注'}
                ]]
            });
       }
   }
}
</script>

<style lang="scss">

</style>
